<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Pattern Generator</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="col">
	<div class="controls">
		<h1>Pattern Generator</h1>
		<h3>Options</h3>
		<div class="controls__group">
		<label for="#angle">Angle</label>
			<input type="range" min="5" max="85" id="angle" data-input="range">
		</div>
		<div class="controls__group">
			<label for="#thickness">Stripe thickness</label>
			<input type="range" min="2" max="120" step="1" id="thickness" data-input="thickness" value="30">
		</div>
		<div class="controls__group">
			<label for="#width">Segment width</label>
			<input type="range" min="10" max="200" step="1" id="width" data-input="width" value="100">
		</div>
		<div class="controls__group">
			<label for="#color1">Primary colour</label>
			<input type="range" min="0" max="360" step="1" id="color1" data-input="color1" value="100">
		</div>
		<div class="controls__group">
			<label for="#color1">Contrast</label>
			<input type="range" min="50" max="90" step="1" id="contrast" data-input="contrast">
		</div>

		<h3>CSS output</h3>
		<div class="css" data-output></div>
	</div>
</div>

<div class="bg" data-bg></div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js'></script><script  src="./script.js"></script>

</body>
</html>
